<!DOCTYPE html>
<body topmargin="0" marginheight="0" leftmargin="0"></body>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>梦幻空间-控制台</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="content-type" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
</head>
<link rel="stylesheet" href="resources/css/mdui.min.css"/>
<link rel="stylesheet" href="resources/main_ui.css"/>
<link rel="stylesheet" href="https://codevicent.xyz/css/login_window.css"/>

<div class="starting" id="starting">
    <div class="start_inf">
        <img src="./resources/loading.gif">
    </div>
</div>
<div class="loading_mask" id="loading_mask" style="display: none;">
    <div class="loading_mask_box">
        <img class="rotating-element" src="resources/loading_gIco.png">
    </div>
</div>
<div class="loading_mask" id="update_mask" style="display: none;">
    <div class="update_box">
        <div class="update_infBar">
            <h1 id="v_pack">更新: V1.0.1</h1>
            <div class="update_txtBox">
                <p id="update_txt"></p>
            </div>
            <a href="javascript:void(0);" onclick="go_update()">
                <div class="go_update_btn">
                    <div>去更新</div>
                </div>
            </a>
            <div style="margin-top: 10px;"><a href="javascript:void(0);" onclick="close_update()" style="color: #00d1ad;">暂时不更新</a></div>
        </div>
    </div>
</div>

<div class="top_guide">
    <h3 class="name_logo top_m">空间控制台</h3>
    <div class="function_guide">
        <div class="function_button" onclick="change_card('index')" id="index_b">
            <p style="font-family: title_font;">主页</p>
        </div>
        <div class="function_button" onclick="change_card('main')" id="main_b">
            <p style="font-family: title_font;">壁纸</p>
        </div>
        <div class="function_button" onclick="change_card('char')" id="char_b">
            <p style="font-family: title_font;">角色</p>
        </div>
        <div class="function_button" onclick="change_card('zj')" id="zj_b">
            <p style="font-family: title_font;">组件</p>
        </div>
    </div>
    <a class="top_m button_a" style="margin-right:30px;color:rgb(255,255,255)" href="javascript:void(0);" id="user_name_bar" onclick="login_deal()">登录</a>
    <a class="top_m button_a" style="margin-right:30px;color:rgb(255,255,255)" href="javascript:void(0);" onclick="change_card('setting')"><img src="./resources/setting_ico.png" style="width: 25px;height: 25px;margin-top: auto;margin-bottom: auto;"></a>
    <!-- <a class="top_m button_a" style="margin-right:30px;color:rgb(255,255,255)" href="javascript:void(0);" id="set_b" onclick="change_card('setting')">设置</a> -->
</div>
<style>
.index-container {
  display: flex;
  padding: 40px;
  height: 100%;
  background-color: #f5f7fa; /* 浅灰色背景 */
}

.left-section {
  width: 60%;
  padding-right: 40px;
}

.welcome-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.welcome-title {
  font-size: 36px;
  color: #00d1ad;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.welcome-subtitle {
  font-size: 24px;
  color: #666;
  margin-bottom: 5px;
  font-weight: 500;
}

.version-info {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  font-style: italic;
}

.features-intro h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 25px;
  position: relative;
  padding-left: 15px;
  font-weight: 600;
}

.features-intro h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  height: 24px;
  width: 4px;
  background: #00d1ad;
  border-radius: 2px;
}

.feature-item {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  background-color: #f8f9fa;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background-color: #e9f7ef;
  border-left-color: #00d1ad;
  transform: translateX(5px);
}

.feature-icon {
  font-size: 28px;
  color: #00d1ad;
  margin-bottom: 10px;
}

.feature-item h3 {
  font-size: 20px;
  color: #00d1ad;
  margin-bottom: 10px;
  font-weight: 600;
}

.right-section {
  width: 40%;
  display: flex;
  flex-direction: column;
}

.feature-status {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.status-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.status-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px 0 rgba(31, 38, 135, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  color: #333;
  margin: 0;
  font-weight: 600;
}

.status-tag {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-tag.running {
  background-color: #e0fbf5;
  color: #00d1ad;
}

.status-tag.stopped {
  background-color: #f1f1f1;
  color: #999;
}

.status-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-button {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.start-btn {
  background-color: #00d1ad;
  color: white;
}

.stop-btn {
  background-color: #ff4b5c;
  color: white;
}

.action-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auto-start-label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; 
  left: 0;
  right: 0; 
  bottom: 0;
  background-color: #ddd;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: #00d1ad;
}

input:checked + .slider:before {
  transform: translateX(24px);
}
</style>
<div class="index_page" id="index_page">
  <div class="index-container">
    <div class="left-section">
      <div class="welcome-card">
        <h1 class="welcome-title">欢迎使用梦幻空间</h1>
        <p class="welcome-subtitle">桌面掌握在手</p>
        <p class="version-info">v.dev © CodeVicent 2025</p>
      </div>
      
      <div class="features-intro">
        <h2>软件功能介绍</h2>
        <div class="feature-item">
          <div class="feature-icon"><i class="fas fa-video"></i></div>
          <h3>动态壁纸</h3>
          <p>打造个性化桌面体验，支持视频和网页壁纸。</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fas fa-user-astronaut"></i></div>
          <h3>角色互动</h3>
          <p>添加虚拟角色，带来生动有趣的桌面互动。</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fas fa-cubes"></i></div>
          <h3>组件</h3>
          <p>丰富的小工具组件，提升桌面实用性和功能性。</p>
        </div>
      </div>
    </div>

    <div class="right-section">
      <div class="feature-status">
        <div class="status-card">
          <div class="card-header">
            <h3>动态壁纸&组件服务</h3>
            <div class="status-tag stopped">未运行</div>
          </div>
          <div class="status-actions">
            <button class="action-button start-btn">开启</button>
            <div class="toggle-wrapper">
              <span class="auto-start-label">开机自启动</span>
              <label class="switch">
                <input type="checkbox">
                <span class="slider"></span>
              </label>
            </div>
          </div>
        </div>

        <div class="status-card">
          <div class="card-header">
            <h3>角色互动服务</h3>
            <div class="status-tag stopped">未运行</div>
          </div>
          <div class="status-actions">
            <button class="action-button start-btn">开启</button>
            <div class="toggle-wrapper">
              <span class="auto-start-label">开机自启动</span>
              <label class="switch">
                <input type="checkbox">
                <span class="slider"></span>
              </label>
            </div>
          </div>
        </div>

        <div class="status-card">
          <div class="card-header">
            <h3>简易桌面</h3>
            <div class="status-tag stopped">未运行</div>
          </div>
          <div class="status-actions">
            <button class="action-button start-btn">开启</button>
            <div class="toggle-wrapper">
              <span class="auto-start-label">开机自启动</span>
              <label class="switch">
                <input type="checkbox">
                <span class="slider"></span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="main_page" id="main_page">
    <div class="select_vid_card" id="select_wpp_bar">
        <div style="width: 100%;display:flex;height: auto;">
            <h3 class="function_name kjccg" id="had_add_frame">已添加的项目</h3>
            <button class="button_main green_btn"><a class="button_a" href="javascript:void(0);" mdui-dialog="{target: '#example-3'}">+ 本地视频</a></button>
            <button class="button_main green_btn"><a class="button_a" href="javascript:void(0);" mdui-dialog="{target: '#example-4'}">+ 本地网页</a></button>
        </div>
        <!-- 下面的7777搞好以后记得改回777 -->
        <div class="newProject_card" id="777">
        </div>
        <div class="every_day_setting" style="display: none;">
            <div style="width: 90%;height:auto;margin: auto;display: flex;">
                <label class="mdui-checkbox">
                    <input type="checkbox" id="everyday_openInput"/>
                    <i class="mdui-checkbox-icon"></i>
                        每天一遍，坚定信念
                </label>
                <p id="every_day_path">开启后每次启动壁纸前会先播放一次所选视频</p>
                <a href="javascript:void(0);" onclick="change_everyday_path()">浏览</a>
            </div>
        </div>
    </div>
    <div class="state_bar" id="state_bar">
        <div class="inf_bar" id="inf_bar_html">
            <div class="no_infShow_out" id="no_infShow">
                <div class="no_infShow">
                    <div>
                        <img src="./resources/no_data.png">
                    </div>
                    <h2>没有信息</h2>
                </div>
            </div>
        </div>
        <div class="service_state_box">
            <div style="width: 80%;margin: auto;display: flex;">
                <p id="wpp_service_p" style="margin-top: auto;margin-bottom: auto;">loading...</p>
                <a id="wpp_service_b" href="javascript:void(0);" style="margin-left: auto;" onclick="run_service()">
                    <div class="start_s_btn"><p>开启</p></div>
                </a>
            </div>
        </div>
        <div class="now_wp_bar" id="now_wp_bar">
        </div>
    </div>
</div>

<style>
    .setting_page{
        width: 100%;
        height: 100%;
        display: none;
    }
    .set_broad{
        width: 80%;
        height: auto;
        background-color: white;
        border-radius: 25px;
        margin: auto;
        margin-top: 30px;
    }
    .set_box{
        width: 90%;
        height: auto;
        margin: auto;
    }
    .btn-on{
      width: 60px;
      height: 25px;
      margin: 0 3px;
      border-radius: 25px;
      font-size: 14px;
    }
    .btn-on{
      cursor: pointer;
      position: relative;
      border: 1px solid white;
      background-color: #12B090;
    }
    .btn-on-circle{
      position: absolute;
      width: 15px;
      height: 15px;
      top: 5px;
      right: 5px;
      background-color: rgb(255, 255, 255);
      border-radius: 50%;
      box-shadow: 0 0 10px white;
      transition: all .5s;
    }
    .btn-on-text{
      position: absolute;
      left: 10px;
      line-height: 25px;
      color: white;
      transition: all .5s;
    }
    .a-set{
        display: flex;
    }
    .set_box p{
        color: #9b9b9b;
    }
</style>
<div class="setting_page" id="set_page">
    <div class="set_broad">
        <div class="set_box">
            <h2>关于 梦幻空间</h2>
            <p id="v_show">当前版本：beta v0.5</p>
            <p>软件作者： CodeVicent Vicent轩</p>
            <p>开源地址：<a href="javascript:void(0);" style="text-decoration: none;" onclick="window.pywebview.api.go_link('https://gitee.com/codevicent/wpp')">https://gitee.com/codevicent/wpp</a></p>
            <!-- <h1>设置</h1> -->
        </div>
        <!-- <div class="set_box" id="set_box">
        </div> -->
    </div>
</div>

<div class="mdui-dialog" id="example-3">
    <div class="mdui-dialog-content">
        <div class="mdui-dialog-title">仅导入视频</div>
        不进行任何细致编辑，直接将视频作为壁纸
        <div>
            <div class="mdui-textfield" style="width: 100%;">
                <label class="mdui-textfield-label">壁纸名称：</label>
                <input class="mdui-textfield-input" type="text" id="name_input"/>
            </div>
            <div class="mdui-textfield" style="width: 100%;">
                <label class="mdui-textfield-label">壁纸艺术家：</label>
                <input class="mdui-textfield-input" type="text" id="art_input"/>
            </div>
            <div class="mdui-textfield" style="width: 100%;">
                <label class="mdui-textfield-label">文件路径</label>
                <input class="mdui-textfield-input" type="text" id="path_input"/>
            </div>
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-color-teal-a100" style="width: 100%;" onclick="create('vid')">浏览</button>
        </div>
        <label class="mdui-checkbox">
            <input type="checkbox" id="vid_fz"/>
            <i class="mdui-checkbox-icon"></i>
                视频镜像
        </label>
        <label class="mdui-checkbox">
            <input type="checkbox" id="vid_sound"/>
            <i class="mdui-checkbox-icon"></i>
                播放声音
        </label>
    </div>
    <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="add_project()">确定</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>取消</button>
    </div>
</div>


<div class="mdui-dialog" id="example-4">
    <div class="mdui-dialog-content">
        <div class="mdui-dialog-title">仅导入网页</div>
        使用html作为壁纸
        <div>
            <div class="mdui-textfield" style="width: 100%;">
                <label class="mdui-textfield-label">壁纸名称：</label>
                <input class="mdui-textfield-input" type="text" id="dir_name_input"/>
            </div>
            <div class="mdui-textfield" style="width: 100%;">
                <label class="mdui-textfield-label">壁纸艺术家：</label>
                <input class="mdui-textfield-input" type="text" id="dir_art_input"/>
            </div>
            <div class="mdui-textfield" style="width: 100%;">
                <label class="mdui-textfield-label">文件夹路径</label>
                <input class="mdui-textfield-input" type="text" id="dir_path_input"/>
            </div>
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-color-teal-a100" style="width: 100%;" onclick="choice_dir()">浏览</button>
        </div>
    </div>
    <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="add_HtmlProject()">确定</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>取消</button>
    </div>
</div>
<style>
    .full_back{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5);
        display: none;
        justify-content: center;
        align-items: center;
    }
    .fb_window{
        width: 80%;
        height: 25%;
        margin:auto;
        margin-top: auto;
        background-color: white;
        border-radius: 25px;
    }
    .fb_w_bar{
        padding: 20px;
        width: 90%;
        margin: auto;
    }
</style>
<div class="full_back" id="full_back">
    <div class="fb_window">
        <div class="fb_w_bar">
            <h3>正在处理中...</h3>
            <div style="margin-top:30px;" class="mdui-progress">
                <div class="mdui-progress-indeterminate"></div>
            </div>
        </div>
    </div>
</div>



<div class="char_page" id="char_page" style="display:none;">
    <div style="width: 100%;">
        <div class="now_char_bar">
            <div style="width: 85%;display: flex;margin: auto;">
                <div class="now_char_msg_box">
                    <h3 style="color: #00B8A9;">当前角色：</h3>
                    <h1 id="running_charName">未启用</h1>
                    <button class="green_btn stop_char_btn" style="width: 100px;margin-bottom: 10px;display: none;" id="stop_char_btn"><a href="javascript:void(0);" onclick="stop_char()">退下</a></button>
                </div>
                    <img id="running_charImg" style="margin-left:auto;height: 120px;width: 120px;margin-top: auto;margin-bottom: auto;" src="./resources/loading_ico.png">
                </div>
        </div>
        <div class="char_list_bar" style="margin-top: 30px;" id="clb">
            <div class="type_select_bar">
                <a href="javascript:void(0);" id="char_local" style="color:rgb(200,200,200)" onclick="load_charRES_local()">已下载</a>
                <a style="margin-left: 20px;" href="javascript:void(0);" style="color:rgb(200,200,200)" id="char_web" onclick="load_charRES_web()">资源库</a>
                <a style="margin-left: auto;" href="javascript:void(0);" style="color:rgb(200,200,200)" onclick="window.pywebview.api.create_NewChar()">+ 创建</a>
            </div>
            <div class="charInf_list_bar" id="cil_bar">
                <div class="charInf_bar">
                </div>
            </div>
            <iframe style="display: none;" class="char_web_iframe" src="" id="char_web_iframe"></iframe>
        </div>
    </div>
</div>
<style>
  .had_download_btn {
        padding: 8px 16px;
        border-radius: 20px;
        background-color: #cccccc; /* 灰色背景表示不可操作 */
        color: white;
        cursor: not-allowed; /* 鼠标悬停时显示为禁止状态 */
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        box-shadow: none; /* 去除阴影以减少交互感 */
        opacity: 0.7; /* 可选：降低透明度进一步表明不可点击 */
    }
  .work_actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #eee; /* 添加上边线分隔 */
    }

    .download_btn {
        padding: 8px 16px;
        border-radius: 20px;
        background-color: #00d1ad;
        color: white;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 209, 173, 0.2); /* 添加柔和阴影 */
    }

    .download_btn:hover {
        background-color: #00bfa5; /* 稍微变深的颜色 */
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 209, 173, 0.3); /* 悬浮时增强阴影 */
    }
  /* 详情弹窗样式 */
    .work_detail_modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .work_detail_content {
        background: white;
        border-radius: 15px;
        width: 600px;
        height: 80vh;
        overflow-y: auto;
        position: relative;
        padding: 30px;
    }
    
    .work_detail_close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 20px;
        cursor: pointer;
        color: #999;
    }
    
    .work_detail_inner {
        display: flex;
        gap: 20px;
    }
    
    .work_detail_cover {
        width: 180px;
        height: 180px;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
    }
    
    .work_detail_info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
</style>
<!-- 详情弹窗 -->
<div class="work_detail_modal" id="work_detail_modal">
    <div class="work_detail_content">
        <span class="work_detail_close" onclick="closeWorkDetail()">&times;</span>
        <div class="work_detail_inner" id="work_detail_inner">
            <!-- 动态内容 -->
        </div>
        <!-- <div class="rating-section">
            <p>给这个作品评分:</p>
            <div class="star-rating">
                <span class="star" data-rating="1">☆</span>
                <span class="star" data-rating="2">☆</span>
                <span class="star" data-rating="3">☆</span>
                <span class="star" data-rating="4">☆</span>
                <span class="star" data-rating="5">☆</span>
            </div>
        </div> -->
        <iframe id="comment_iframe" style="width: 100%;height: 100%;border: none;"></iframe>
    </div>
</div>
<div id="downloadingDialog" class="mdui-dialog" style="display: none; border-radius: 16px; max-width: 400px; text-align: center;">
    <div class="mdui-dialog-content" style="padding: 30px 20px;">
        <div class="rotating-element" style="margin: 0 auto; width: 50px; height: 50px;">
            <img src="resources/loading_green.png" style="width: 100%; height: 100%;">
        </div>
        <h3 style="margin-top: 20px; margin-bottom: 10px;">正在下载角色...</h3>
        <p id="publishingStatus" style="color: #666;">请稍候，这可能需要一些时间</p>
    </div>
</div>
<style>
    .vid_edit_bar{
        width: 80%;
        height: auto;
        background-color: white;
        margin: auto;
        border-radius: 25px;
        margin-top: 10px;
        padding: 25px;
    }
    .vid_view{
        background-color: black;
        position: relative;
        overflow: hidden;
    }
    .vid_view_vid{
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right:0;
        margin: auto;
    }
    .video_jx{
        transform: rotateY(180deg);
        -webkit-transform:rotateY(180deg); /* Safari and Chrome */
        -moz-transform:rotateY(180deg); /* Firefox */
    }
    .text_inf_bar{
        margin-left: 30px;
        margin-top: -30px;
        padding: 20px;
    }
    .inf_input_bar{
        display: flex;
    }
    .vid_inf_bar{
        display: flex;
    }
    .input_bar{
        margin-left: 10px;
        border-radius: 5px;
        width: 300px;
        height: 30px;
        margin-top: auto;
        margin-bottom: auto;
        border: 2px solid rgb(0, 255, 213);
    }
    .vid_pack_setBar{
        display: flex;
        margin-left: 30px;
    }
    .vid_pack_setBar input{
        height: 20px;
        width: 50px;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 10px;
        margin-right: 5px;
    }
    .edit_ok_btn{
        display: flex;
        margin-left: auto;
        width: 200px;
        height: 50px;
        border-radius: 25px;
        border: 5px solid #55ccc9;
    }
    .edit_ok_btn a{
        text-decoration: none;
        color: rgb(0, 219, 183);
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .edit_top{
        margin: auto;
        width: 80%;
        display: flex;
        margin-top: 10px;
    }
    .edit_top a{
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        text-decoration: none;
        font-size: 20px;
        color: rgb(180,180,180);
    }
    .edit_top h1{
        color: #55ccc9;
    }
</style>
<div class="vid_wpp_edit_page" id="vid_wpp_edit_page" style="display: none;">
    <div style="width: 100%;">
        <div class="edit_top">
            <h1>壁纸信息和布局编辑</h1>
            <a href="javascript:void(0);" onclick="change_card('main')">← 返回</a>
        </div>
        <div class="vid_edit_bar">
            <div class="vid_inf_bar">
                <div class="vid_view" id="vid_view_bar">
                    <video autoplay="autoplay" class="vid_view_vid" id="vid_view" loop src="" style="display: none;"></video>
                    <iframe class="vid_view_vid" id="vid_view_iframe" src="" style="display: none;border: none;height: 100%;"></iframe>
                </div>
                <div class="text_inf_bar">
                    <div class="inf_input_bar">
                        <h3>名称: </h3>
                        <input class="input_bar" type="text" id="wpp_name_input">
                    </div>
                    <div class="inf_input_bar">
                        <h3>作者: </h3>
                        <input class="input_bar" type="text" id="wpp_editer_input">
                    </div>
                    <div style="display:flex;">
                        <h3>壁纸应用内ID: </h3>
                        <p style="margin-top:auto;margin-bottom:auto;margin-left:15px;" id="edit_show_wppid">loading....</p>
                        <h3 style="padding-left:20px;">角色link:</h3>
                        <select id="char_select" style="width: 100px;height:30px;margin-top: auto;margin-bottom: auto;margin-left: 10px;padding-left: 5px;">
                            <option value="volvo">不使用</option>
                        </select>
                    </div>
                    <label class="mdui-checkbox" id="vid_wpp_edit_jx">
                        <input type="checkbox" id="edit_jx"/>
                        <i class="mdui-checkbox-icon"></i>
                            视频镜像
                    </label>
                    <label class="mdui-checkbox" style="margin-left:20px;" id="vid_wpp_edit_sy">
                        <input type="checkbox" id="edit_sound"/>
                        <i class="mdui-checkbox-icon"></i>
                            播放声音
                    </label>
                </div>
            </div>
            <h2 id="vid_wpp_edit_pack_text">视频布局设置</h2>
            <div style="display: flex;" id="vid_wpp_edit_pack">
                <div class="vid_pack_setBar">
                    <p>缩放</p>
                    <input id="size_input" type="number" value="100">
                    <p>%</p>
                </div>
                <div class="vid_pack_setBar">
                    <p>位移</p>
                    <input id="offset_input" type="number" value="0">
                    <p>px</p>
                </div>
                <label class="mdui-checkbox" style="margin-left:15px;margin-top: auto;margin-bottom: auto;">
                    <input type="checkbox" id="edit_center"/>
                    <i class="mdui-checkbox-icon"></i>
                        <p style="margin-top:auto;margin-bottom:auto;margin-left:-13px">自动居中</p>
                </label>
            </div>
            <button class="edit_ok_btn" id="wpp_edit_save_btn">
                <a href="javascript:void(0)" onclick="save_wppEdit()">确认保存</a>
            </button>
        </div>
    </div>
</div>
<style>
    .zj_page{
        width: 100%;
        height: 100%;
        display: none;
        overflow: hidden;
    }
    .zj_box{
        width: 80%;
        height: auto;
        margin: auto;
        padding: 50px;
    }
    .zj{
        background-color: white;
        width: 100%;
        height: auto;
        border-radius: 20px;
        display: block;
    }
    .zj iframe{
        width: 100%;
        height: 300px;
        border: none;
    }
    .zj_inf_bar{
        margin-left: 30px;
        display: flex;
        padding: 10px;
    }
    .zj_inf_bar p{
        margin-left: 20px;
    }
</style>
<div class="zj_page" id="zj_page">
    <div class="zj_box" id="plug_pack">
    </div>
</div>
<script src="./resources/ui.js"></script>
<script src="/resources/js/mdui.min.js"></script>
<script src="/resources/load_login_win.js/"></script>
<script src="/resources/cv_request_tool.js"></script>